<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div class="showMe">
    <!-- 头部背景 -->
    <div class="t-bg">
      <img src="@/assets/img/t-bg.png" alt="" />
    </div>
    <img class="touxiang" src="@/assets/img/touxiang.jpg" alt="" />
    <!-- 内容 -->
    <div class="user-container">
      <div class="user-info">
        <p class="user-info-name">啊丢/前端工程师</p>
        <p class="user-info-content">
          一名渴望星辰大海的98后打野程序员，做过小程序、网站等。希望在这能结识到志同道合的朋友一起努力，当然有开发需求的朋友也可以来聊聊。
        </p>
        <p class="user-info-email">博主邮箱：836300452@qq.com</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowMe',
  methods: {}
}
</script>

<style lang="less" scoped>
.showMe {
  position: relative;
  margin-left: 50px;
  width: 400px;
  height: 400px;
  background: white;
  box-shadow: 0 4px 5px 0 #d9dfe9;
  margin-bottom: 20px;
  .t-bg {
    img {
      width: 100%;
    }
  }
  .touxiang {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    &:hover {
      width: 130px;
      height: 130px;
    }
  }
  .user-info {
    margin-top: 50px;
    .user-info-name {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }
    .user-info-content {
      padding: 15px 30px 15px;
      text-indent: 2em;
      line-height: 26px;
      font-size: 16px;
      color: #999;
    }
    .user-info-email {
      color: #999;
      text-align: center;
    }
  }
}
</style>
